<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from "echarts";
let myHeading = ref(null)
onMounted(()=>{
  // let {proxy} = getCurrentInstance();
  // console.log(proxy.$echarts)
  // console.log(proxy.$axios)
  let myEcharts = echarts.init(myHeading.value);
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
  const option:object =  {
    title: {
      top: '10%',
      left: '3%',
      text: '全部订单',
      textStyle: {
        // 文字颜色
        color: 'black',
        // 字体大小
        fontSize: 18,
        fontWeight: 500
      }
    },
    grid: {
      top: '90',
      bottom: '5%',
      right: '5%',
      left: '5%',
      containLabel: true
    },
    legend: {
      show: true,
      top: '10%',
      icon: 'square'
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      // axis
      nameTextStyle: {
        color: 'white'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#999999'
        }
      },
      splitLine: {
        show: false
      },
      boundaryGap: false,
      data: ['', '已处理', '已取消', '待处理', '退款中', '']
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      },
      splitNumber: 3,
      axisLine: {
        lineStyle: {
          color: 'black'
        }
      }
    },
    series: [
      {
        data: [0, 23, 30, 26, 30, 0],
        name: '昨日',
        type: 'line',
        top: 0,
        smooth: true,
        symbolSize: 0,
        lineStyle: {
          color: 'rgb(255,179,0)'
        },
        areaStyle: {
          // symbolSize:symbolSize ,
          textStyle: {
            // 文字颜色
            color: '#ffc23d',
            // 字体大小
            fontSize: 18,
            fontWeight: 500
          },
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgb(255,179,0)'
              },
              {
                offset: 1,
                color: 'rgb(255,179,0)'
              }
            ],
            global: false // 缺省为 false
          }
        }
      },

      {
        data: [0, 20, 15, 30, 15, 0],
        type: 'line',
        name: '今日',
        smooth: true,
        symbolSize: 0,
        lineStyle: {
          color: 'rgb(225,94,13)'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgb(255,176,101)'
              },
              {
                offset: 1,
                color: 'rgb(245,123,0)'
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  }
  myEcharts.setOption(option)
})
</script>

<template>
  <div id="echarts" ref="myHeading" style="width: 60%; height: 240px"></div>
</template>

<style scoped lang="scss">
#echarts{
  //margin-top: 15px;
  box-shadow: 0px 10px 16px 0px
  rgba(132, 132, 152, 0.68);
  background: white;
  opacity: 0.9;
  border-radius: 15px;
  ::v-deep >div:first-child{
    width: 100%!important;
    canvas{
      width: 100%!important;
    }
  }
}
</style>
